<template>
  <div>
    <div class="mineTop" @click="islogin">
      <dt><img :src="userHeadImg"></dt>
      <dd>{{userPhone}}</dd>
    </div>

    <div class="mineList">
      <dl @click="toOrderPage">
        <dt><i class="iconfont icon-dingdan"></i></dt>
        <dd>订单</dd>
        <i class="iconfont icon-xiayige"></i>
      </dl>

      <dl @click="toCouponsPage">
        <dt><i class="iconfont icon-youhuiquan"></i></dt>
        <dd>优惠券</dd>
        <i class="iconfont icon-xiayige"></i>
      </dl>

      <dl @click="toAddressListPage">
        <dt><i class="iconfont icon-dizhi"></i></dt>
        <dd>收货地址</dd>
        <i class="iconfont icon-xiayige"></i>
      </dl>

      <dl @click="toCollectPage">
        <dt><i class="iconfont icon-shoucang"></i></dt>
        <dd>收藏</dd>
        <i class="iconfont icon-xiayige"></i>
      </dl>
    </div>

    <div class="mineList">
      <dl class="contactBtn">
        <button open-type="contact"></button>
        <dt><i class="iconfont icon-shuoming"></i></dt>
        <dd>联系客服</dd>
        <i class="iconfont icon-xiayige"></i>
      </dl>

      <dl @click="toSetPage">
        <dt><i class="iconfont icon-shezhi"></i></dt>
        <dd>设置</dd>
        <i class="iconfont icon-xiayige"></i>
      </dl>

      <dl @click="toHelpPage">
        <dt><i class="iconfont icon-bangzhu"></i></dt>
        <dd>帮助</dd>
        <i class="iconfont icon-xiayige"></i>
      </dl>
    </div>


  </div>
</template>

<script>
  import {removeUserInfo} from '@/utils/wechat'

  export default {
    data() {
      return {
        userHeadImg: 'http://ssfk-media01.oss-cn-shenzhen.aliyuncs.com/user/10002/1541484906729/logo.png',
        userPhone: '登录/注册'
      };
    },
    onLoad() {
      this.$wx.setTitleBarTitle('个人中心');
    },
    onShow() {
      this.getUserInfo();
    },
    methods: {
      islogin() {
        if (this.$wx.isLogin()) {
          return true
        } else {
          this.$wx.jumper("../login/main");
          return false
        }
      },
      toOrderPage() {
        if (this.islogin()) {
          this.$wx.jumper("../orderList/main");
        }
      },
      toCouponsPage() {
        if (this.islogin()) {
          this.$wx.jumper("../couponsList/main");
        }
      },
      toCollectPage() {
        if (this.islogin()) {
          this.$wx.jumper("../collectList/main");
        }
      },
      toAddressListPage() {
        if (this.islogin()) {
          this.$wx.jumper("../addressList/main?type=mine");
        }
      },
      toSetPage() {
        if (this.islogin()) {
          this.$wx.jumper("../mineSet/main");
        }
      },
      toHelpPage() {
        this.$wx.jumper("../h5webView/main?pageUrl=https://app.fashionfinger.com/ssfk/html/static/helppage.html&pageTitle=帮助中心");
      },
      getUserInfo() {
        const userInfo = this.$wx.getUserInfo()
        this.userPhone = userInfo.phone;
        this.userHeadImg = userInfo.face_icon;
        if (this.$wx.isEmpty(this.userHeadImg)) {
          this.userHeadImg = 'http://ssfk-media01.oss-cn-shenzhen.aliyuncs.com/user/10002/1541484906729/logo.png';
        }
        if (this.$wx.isEmpty(this.userPhone)) {
          this.userPhone = '登录/注册'
        }
      }
    },
    created() {
    }
  };
</script>

<style scoped>
  /*我的*/
  .mineTop {
    background: #fff;
    padding: 3% 4%;
    overflow: hidden
  }

  .mineTop dt {
    float: left;
  }

  .mineTop dt img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px #fff solid;
    box-shadow: 0 1px 2px 0 #797979;
  }

  .mineTop dd {
    padding-left: 18px;
    line-height: 48px;
    display: inline-block;
    font-size: 1.2em;
    font-weight: bold
  }

  .mineList {
    background: #fff;
    margin-top: 3%;
  }

  .mineList > a {
    display: block
  }

  .mineList dl {
    overflow: hidden;
    padding: 0 3%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    position: relative
  }

  .mineList dl dt {
    float: left;
    padding-right: 16px;
    height: 44px;
    line-height: 44px
  }

  .mineList dl dt i {
    font-size: 22px
  }

  .mineList dl dd {
    border-bottom: 1px #f5f5f5 solid;
    height: 44px;
    line-height: 44px;
    font-size: 1.1em;
    display: block;
    flex: 1;
    padding-right: 16px
  }

  .mineList dl dd span {
    float: right;
    font-size: .8em;
    color: #ff4545
  }

  .mineList dl a:last-child dd {
    border: none
  }

  .mineList dl .icon-xiayige {
    position: absolute;
    top: 50%;
    right: 8px;
    margin-top: -8px;
  }

  .mineList dl .checkbox {
    display: block;
    flex: 1;
    -webkit-flex: 1
  }

  .mineList dl .checkbox span {
    position: absolute;
    right: 6px;
    top: 11px
  }

  .contactBtn {
    position: relative;
  }

  .contactBtn button {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
  }
</style>
